<template>
  <view>
    <!-- 发票明细 start -->
    <view class="fu-invoice-wrap solid-top">
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title">{{ i18n['发票类型'] }}</view>
        <view class="fu-invoice-item-info">
          <text>{{ i18n['电子发票'] }}</text>
        </view>
      </view>

      <view class="flex red-item">{{ i18n['发票信息'] }}</view>

      <view class="flex fu-invoice-item fu-invoice-item-active">
        <view class="fu-invoice-item-title">{{ i18n['抬头类型'] }}</view>
        <view class="fu-invoice-item-info flex align-center justify-end">
          {{invoiceData.invoice_type==1?i18n['个人']:i18n['企业']}}
        </view>
      </view>
      <view class="flex fu-invoice-item fu-invoice-item-active">
        <view class="fu-invoice-item-title flex align-center active">{{ i18n['发票抬头'] }}</view>
        <view class="fu-invoice-item-info">
          {{invoiceData.invoice_title}}
        </view>
      </view>
      <view class="flex fu-invoice-item fu-invoice-item-active" v-show="invoiceData.invoice_type == 2">
        <view class="fu-invoice-item-title active">{{ i18n['公司税号'] }}</view>
        <view class="fu-invoice-item-info">
          {{invoiceData.invoice_company_duty_paragraph}}
        </view>
      </view>
    </view>
    <!-- 发票明细 end -->

    <!-- 发票内容 start -->
    <view class="fu-invoice-wrap" >
      <view class="flex fu-invoice-item">
        <view class="fu-invoice-item-title">{{ i18n['发票内容'] }}</view>
        <view class="fu-invoice-item-info">
          <text>{{ i18n['商品明细'] }}</text>
        </view>
      </view>
    </view>
    <!-- 发票内容 end -->
    <!-- 联系方式 start -->
    <view class="flex bg-white align-center fu-invoice-item " style="margin-top: 20rpx" :class="invoiceData.invoice_email?'fu-invoice-item-active':''">
      <view class="fu-invoice-item-title active">{{ i18n['联系方式'] }}</view>
      <view class="fu-invoice-item-info">		{{invoiceData.invoice_mobile}}    </view>
    </view>
    <!-- 联系方式 end -->
    <!-- 电子邮箱 start -->
    <view class="flex bg-white align-center fu-invoice-item" v-if="invoiceData.invoice_email">
      <view class="fu-invoice-item-title">{{ i18n['电子邮箱'] }}</view>
      <view class="fu-invoice-item-info">{{invoiceData.invoice_email}}</view>
    </view>
    <!-- 电子邮箱 end -->

    <!-- 确认按钮 start -->
    <button type="warn" class="submit-btn" @click="submitClick">
      <text>{{ i18n['确认提交'] }}</text>
    </button>
    <!-- 确认按钮 end -->
  </view>
</template>

<script>
import { validate } from '@/common/utils/index.js';
export default {
  data() {
    return {
      invoiceData: {
        invoice_type: 1, //1个人2企业
        invoice_title: '', //抬头
        invoice_company_duty_paragraph: '', //税号
        invoice_mobile: '', //联系方式
        invoice_email: '', //电子邮件
        invoice_is_default: '1' //默认抬头
      },
      type: '',
      isClick: false, // {Boolean} 是否展开企业发票明细
      showPhone: '', //用来展示的手机号
      order_sn: '', //订单号
      payable_money: '', //发票金额
      isEdit: '',
      invoice_title_person: '', //个人默认抬头
      invoice_title_company: '', //企业默认抬头
      isPerson: true, //进入页面，塞入默认抬头（个人）
      isCompany: true //进入页面，塞入默认抬头（企业）
    };
  },
  watch:{
    "invoiceData.invoice_mobile": {
      handler(newVal,oldVal){
        if(validate(newVal, "phone")){
          this.invoiceData.invoice_mobile = newVal.substr(0, 3) + "****" + newVal.substr(-4);
        }else{
          this.invoiceData.invoice_mobile = newVal;
        }
      },
      deep: true,
      immediate: true,
    }
  },
  onLoad(option) {
    this.setNavigationBarTitle(this.i18n['申请开票']);
    let { invoice_info } = option;
    console.log(invoice_info);
    invoice_info = JSON.parse(invoice_info);
    this.invoiceData = invoice_info.invoiceData;
    this.type = invoice_info.type;
    this.order_sn = invoice_info.order_sn;
    this.payable_money = invoice_info.payable_money;
  },
  methods: {
    /**
     * @description 手机号过滤中间四位用*代替
     */
    filterMobile() {
      if (!this.invoiceData.invoice_mobile) return '';
      let phone = this.invoiceData.invoice_mobile;
      if (!validate(phone, 'phone')) {
        this.$message.info(this.i18n['请检查手机号']);
      } else {
        this.showPhone = phone.substr(0, 3) + '****' + phone.substr(-4);
      }
    },
    defalutRise(e) {
      this.invoiceData.invoice_is_default = e.detail.value[0] == 1 ? e.detail.value[0] : 2;
      // console.log(this.invoiceData.invoice_is_default);
    },
    /**
     * @event
     * @description 点击提交按钮
     */

    submitClick() {
      // this.getInvoice(this.invoiceData);
      if (this.type == 1) {
        uni.$emit('select_invoice', this.invoiceData);
        uni.navigateBack({
          delta:2
        });
      } else {
        this.getInvoice(this.invoiceData);
      }
    },
    /**
     * @event
     * @description 选择抬头类型
     * @param {Number} type - 1：个人或事业单位；2：企业；
     */
    changeRise(type) {
      this.invoiceData.invoice_type = Number(type);
    },
    /**
     * @description 发票申请
     * @param {Object} data 入参
     */
    getInvoice(data) {
      console.log(data);
      data.order_sn = this.order_sn;
      console.log(this.order_sn);
      data.invoice_price = Number(this.payable_money);

      for (let item in data) {
        if (data[item] == null) {
          delete data[item];
        }
      }
      if (this.isEdit) {
        this.$api
          .post(global.apiUrls.invoiceUpdate, data)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              this.$message.success(this.i18n['修改成功']);
              setTimeout(() => {
                uni.$emit('onPageUpdata', { type: 5, data: { itemIndex: this.itemIndex }, order_sn: this.order_sn, msg: this.i18n['发票'] });
                uni.navigateBack({
                  delta: 2
                });
              }, 800);
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$api
          .post(global.apiUrls.postInvoiceApply, data)
          .then(res => {
            console.log(res);
            if (res.data.code == 1) {
              this.$message.success(this.i18n['申请成功']);
              setTimeout(() => {
                uni.$emit('onPageUpdata', { type: 5, data: { itemIndex: this.itemIndex }, msg: this.i18n['发票'] });
                uni.navigateBack({
                  delta: 2
                });
              }, 800);
            } else {
              this.$message.info(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    /**
     * @description 获取发票详情   如果是修改发票  获取发票原来填写的信息
     * @param {String} order_sn 订单号
     */
    getInvoiceData(order_sn) {
      this.$api
        .post(global.apiUrls.pistInvoiceSelect, { order_sn: order_sn })
        .then(res => {
          console.log(res);
          if (res.data.code == 1) {
          } else {
            this.$message.info(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}
.fu-invoice-wrap {
  // padding: 0 32rpx;
  box-sizing: border-box;
  background: #ffffff;
}

.fu-invoice-item {
  height: 108rpx;
  padding: 0 32rpx;
  justify-content: space-between;
  align-items: center;
  // margin-bottom: 10rpx;
  position: relative;

  .fu-invoice-item-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #202020;
    position: relative;
    height: 108rpx;
    line-height: 108rpx;
    padding-left: 20rpx;
    &.active {
      &::before {
        content: '*';
        position: absolute;
        left: 0rpx;
        top: 2rpx;
        color: #fa2033;
      }
    }
  }

  .fu-invoice-item-info {
    flex: 2;
    text-align: right;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    input {
      font-size: 32rpx;
      text-align: right;
    }
  }
}
.red-item {
  // width: 750rpx;
  height: 88rpx;
  background: rgba(255, 100, 100, 0.1);
  font-size: 28rpx;
  font-weight: bold;
  line-height: 88rpx;
  color: #ff6464;
  padding-left: 52rpx;
}
// 下面带线条
.fu-invoice-item-active {
  &:after {
    content: '';
    width: 686rpx;
    height: 1rpx;
    border-bottom: 2rpx solid #eeeeee;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
}
.grey-text {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
}
.font-24 {
  font-size: 24rpx;
}

.submit-btn {
  position: fixed;
  bottom: 40rpx;
  bottom: calc(40rpx + constant(safe-area-inset-bottom));
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  border-radius: 48rpx;
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: $bgtheme;

  // margin-top: 40rpx;
}
</style>
